<template>
  <view class="before-result-page-mbti">

    <view class="top-info-wrapper">
      <view 
       :style="{'background-image':`url(${staticImgs.btnBg})`}"
       class="btn-box" @click="toScl">
        {{btnBoxStr}}
      </view>
    </view>

    <template v-for="(img,index) in imgArr">
      <view class="img-wrapper">
        <image class="img" :src="img" mode="widthFix"></image>

        <view class="img-1-wrapper" v-if="index === 0">
          <view class="name-box">
            {{sclName}}
          </view>
          <view class="label">报告结果</view>
          <view class="time">测评时间：{{sclTime}}</view>
        </view>
      </view>
    </template>

    <view class="btn-wrapper-pos" v-if="showFixedBtn">
      <!-- 解锁专属报告 -->
      <view 
      :style="{'background-image':`url(${staticImgs.btnBg})`}"
      class="btn-box" @click="toScl">
        开始测试
      </view>
    </view>

  </view>
</template>

<script>
  import navigationBar from "@/components/navigationBar/navigationBar.vue";
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'
  
  
  import {
    debounce
  } from 'lodash'

  export default {
    components: {
      navigationBar,
    },
    props: {
      scrollTopNum: {
        type: Number,
        default: 0
      },
      sclId: {
        type: String,
        default: '',
      },
      code: {
        type: String,
        default: '',
      },
      hasOwn: {
        type: Boolean,
        default: false
      },
      sclName:{
        type: String,
        default: '',
      },
      btnBoxStr:{
        type:String,
        default:'开始测试'
      }
    },
    computed: {
      p1() {
        return this.textList[this.code] ? this.textList[this.code][0] : ''
      },
      p2() {
        return this.textList[this.code] ? this.textList[this.code][1] : ''
      },
      imgArr() {
        const obj = {
          tmms:this.staticImgs.tmmsImgArr,
          sbis:this.staticImgs.sbisImgArr,
          spm:this.staticImgs.imgArr
        }
        return this.code == 'tmms' ? this.staticImgs.tmmsImgArr : this.staticImgs.imgArr
      }
    },
    watch: {
      scrollTopNum(val) {
        // console.log(val,'====this.windowHeight')
        this.showFixedBtn = val > (this.windowHeight)
      }
    },
    data() {
      return {
        appointmentOkModalVisible: false,
        textList: {
          "job_mbti": [
            '你的MBTI在职场上有多风光?',
            '助你做出正确的职业选择'
          ],
          "character_mbti": [
            '你的性格最贴近哪种MBTI?',
            '更深入的了解自己'
          ],
        },
        navigationBarDataInfo: {
          "bg_color": "#fff",
          "color": "#333",
          "flag": 1,
          "name": "测一测",
          "hasEntity": true,
        },
        danmakuContainer: {},
        showMoreSclBlock: false,
        windowHeight: 99999,
        beforeExitPayModalVisible: false,
        modalVisible: false,
        staticImgs: {
          imgArr: [
            // this.imgBaseURL + '/scl/ad/SPM/R-12x-v2.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/1.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/img-2-0.jpg',
            this.imgBaseURL + '/scl/ad/SPM/R-22x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-32x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-42x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-52x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-62x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-72x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-82x.png',
            this.imgBaseURL + '/scl/ad/SPM/R-92x(1).png',
            this.imgBaseURL + '/scl/ad/SPM/R-92x.png',
            this.imgBaseURL + '/scl/ad/SPM/r-102x.png',
            this.imgBaseURL + '/scl/ad/SPM/r-112x.png',
            this.imgBaseURL + '/scl/ad/SPM/r-122x.png',
            this.imgBaseURL + '/scl/ad/SPM/r-182x.png',
          ],
          tmmsImgArr:[
            this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/1.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/1@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/2@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/3@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/4@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/5@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/img-6.jpg',
            this.imgBaseURL + '/scl/scl-before-result-page/eq-tmms/img-7.png',
          ],
          sbisImgArr:[
            this.imgBaseURL + '/scl/scl-before-result-page/iq-sbis/1@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/iq-sbis/2.png',
            this.imgBaseURL + '/scl/scl-before-result-page/iq-sbis/3@2x.png',
            this.imgBaseURL + '/scl/scl-before-result-page/iq-sbis/4.png',
          ],
          arrowRight: this.imgBaseURL + '/scl/ad/MBTI/r-arrow.png',
          tipImg: this.imgBaseURL + '/scl/dialog-bg-1.jpg',
          btnBg: this.imgBaseURL + '/scl/scl-before-result-page/iq-spm/btn-bg.jpg',
          smallBtnImg: this.imgBaseURL + '/scl/ad/MBTI/small-unlock-btn.png',
        },
        actType: 'groupA',
        showPopup: false,
        loading: false,
        showFixedBtn: false,
        danmukuData: [],
        hasTriggeredSpecificCondition: false,
        hasBackLock: true,
        appointmentModalVisible: false,
        hasOwnOk: false,
        sclTime: this.$dayjs().format("YYYY-MM-DD HH:mm"),
      }
    },
    mounted() {
      const that = this
      this.hasOwnOk = false
      uni.getSystemInfo({
        success(res) {
          // console.log(res,'====mounted==res')
          that.windowHeight = res.windowHeight / res.devicePixelRatio
        },
        fail() {
          that.windowHeight = 1280
        }
      })

    },
    methods: {
      closeOkHandle() {
        this.appointmentOkModalVisible = false
        this.hasOwnOk = true
        this.$emit('change')
      },
      confirmAppointmentHandle() {
        this.appointmentModalVisible = false
        this.appointmentOkModalVisible = true
      },
      closeAppointmentHandle() {
        console.log('----closeHandle--')
        this.appointmentModalVisible = false
      },
      backHandle() {
        if (this.hasBackLock) {
          this.hasBackLock = false
          if (this.sclPayBack) {
            this.beforeExitPayModalVisible = true
          } else {
            this.modalVisible = true
          }
        } else {
          uni.setStorageSync('mbtiModalVisible', true)
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        }
      },
      showAppointmentModal() {
        this.appointmentModalVisible = true
      },
      toScl() {
        uni.navigateTo({
          url: '/subcontractorC/pages/sclIntroduce/sclIntroduce?paramObj=' + JSON.stringify({
            sclId: this.sclId,
          })
        })
      },


      closeHandle() {
        this.showPopup = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .before-result-page-mbti {
    padding-bottom: 10vh;
    background-color: #fff;
    position: relative;

    .top-info-wrapper {
      padding-bottom: 60rpx;
    }

    .p1-box {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 34rpx;
      color: #000B47;
      line-height: 48rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
    }

    .p2-box {
      margin-top: 4rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #000B47;
      line-height: 42rpx;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;

      margin-bottom: 30rpx;
    }
    
    .img-1-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 0;
      
      display: flex;
      align-items: center;
      flex-direction: column;
          
      .name-box{
        margin-top: 80rpx;
        width: 696rpx;
        height: 120rpx;
        box-shadow: 0rpx 12rpx 20rpx 0rpx #EEF4FF;
        border-radius: 12rpx;

        background-color: rgba(255, 255, 255, .6);
        border: 3rpx solid #AAC4F9;
        
        line-height: 120rpx;
        text-align: center;
        
        font-size: 40rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        color: #1A1B1F;
      }
    
      .label{
        margin-top: 256rpx;
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 500;
        color: #333333;
        
        position: relative;
        
        &::after{
          width: 17rpx;
          height: 1rpx;
          content: '';
          background-color: #979797;
          top: 50%;
          transform: translateY(-50%);
          right: -29rpx;
          position: absolute;
        }
        &::before{
          width: 17rpx;
          height: 1rpx;
          content: '';
          background-color: #979797;
          top: 50%;
          transform: translateY(-50%);
          left: -29rpx;
          position: absolute;
        }
      }
      //.label - end
      
      .time{
        margin-top: 20rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        color: #666666;
      }
    }

    .img-wrapper {
      position: relative;

      .img {
        width: 750rpx;
      }
      }

      .btn-wrapper-pos {
        position: fixed;
        bottom: 7vh;

        left: 0;
        right: 0;

        display: flex;
        justify-content: center;


        .btn-wrapper {
          width: 600rpx;
          height: 90rpx;

          .btn-img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .btn-box {
        width: 400rpx;
        height: 100rpx;
      
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        position: relative;
        
        background-size: 100% 100%;
        background-repeat: no-repeat;
        
        border-radius: 45rpx;
        margin: auto;

        font-family: PingFang-SC, PingFang-SC;
        font-size: 34rpx;
        color: #FFFFFF;
        line-height: 90rpx;

        text-align: center;
        font-style: normal;
      }

    
  }
</style>